<script>
export default {
  name: 'SideCard2'
}
</script>

<template>
  <el-card class="box-card">
    <slot></slot>
  </el-card>
</template>

<style scoped lang="scss">
$bgd: rgba(0, 0, 0, 0.5);
$hoverbgd: rgba(0, 0, 0, 0.7);
$textcol: white;
.box-card {
  margin-top: 20px;
  //outline: none;
  border: 2px solid #003153;
  padding: 10px;
  //width: 400px;
  transition: all .5s;
  //justify-content: center;
  //display: flex;
  max-width: 400px;
  //max-height: 800px;
  border-radius: 30px;
  background: $bgd;
  @media (max-width: 1400px) {
    .box-card {
      width: 28vw;
    }
  }

  &:hover {
    background: $hoverbgd
  }
}
</style>
